/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <div style="margin-top: 20px">
      <el-row >
        <el-table
          :data="treeData"
          style="width: 100%"
          row-key="id"
          border
          lazy
          :load="load"
          :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
          <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
          <el-table-column prop="ico" label="图标" align="center" width="100"></el-table-column>
          <el-table-column prop="sort" label="排序" align="center" width="60"></el-table-column>
          <el-table-column prop="perms" label="权限标识" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="url" label="组件路径" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="80"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit"
                         @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-plus"
                         @click="handleSave(scope.$index, scope.row)">新增</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-dialog :title=title :visible.sync="dialogFormVisible">
        <el-form :model="treeDataForm"  ref="treeData" >
          <el-form-item label="父类ID" label-width="70px">
            <el-input v-model="treeDataForm.parentId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" label-width="70px">
            <el-input v-model="treeDataForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" label-width="70px">
            <el-input v-model="treeDataForm.ico" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" label-width="70px">
            <el-input v-model="treeDataForm.sort" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" label-width="70px">
            <el-input v-model="treeDataForm.perms" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="组件路径" label-width="70px">
            <el-input v-model="treeDataForm.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="70px">
            <el-input v-model="treeDataForm.status" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="edit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import menuApi from "../../api/menu.js";
export default {
  data() {
    return {
      title:'添加管理信息',
      dialogFormVisible:false,
      treeData: [],
      treeDataForm: {
        parentId: '',
        name: '',
        ico: '',
        perms:'',
        sort: '',
        url: '',
        status: ''
      }
    }
  },
  created() {
    this.getData(0)
  },
  methods: {
    closeDialog(){
      this.treeData=[]
      this.getData(0)
      this.dialogFormVisible=false
      this.treeDataForm ={};
    },
    openDialog(){
      this.dialogFormVisible=true
    },
    edit(){
      if(this.title==="添加管理信息"){
        console.log(this.treeDataForm)
        menuApi.save(this.treeDataForm)
      }else{
        console.log(this.treeDataForm)
        menuApi.updateById(this.treeDataForm)
      }
      this.closeDialog()
    },
    handleEdit(index,row){
      this.treeDataForm=row;
      this.title='修改管理信息'
      this.openDialog()
    },
    handleSave(index,row) {
      this.title="添加管理信息"
      this.openDialog();
      this.treeDataForm ={};
      this.treeDataForm.parentId=row.parentId
    },
    handleDelete(index,row){
      this.$confirm("此操作删除当前数据，是否继续？","提示",{
        type:'info'
      }).then(()=> {
        menuApi.deleteById(row.id)
        this.treeData = []
        this.getData(0)
      }).catch(()=>{
        this.$message.info("取消删除操作");
      });
    },
    // 获取数据
    getData(id) {
      menuApi.getMenu(id).then(req=>{
        console.log(req.data)
        this.treeData = req.data;
      })
    },
    load(tree, treeNode, resolve) {
      menuApi.getMenu(tree.id).then(response => {
        resolve(response.data)
      })
    },
  }
}
</script>

<style>
.tree_path{
  margin-right: 20px;
}
.tree_sort{
  margin-right: 20px;
}
.tree_createTime{
  margin-right: 120px;
}
.tree_type{
  margin-right: 140px;
}
.tree_perms{
  margin-right: 20px;
}
</style>

